<template>
    <div>
        <div>
            <div class="lineheight"><span>订单一览</span></div>
            <hr>
            <div class="order">
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple left">
                            <el-row>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <div><p>本周退单</p><h5>3</h5></div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple-light">
                                        <div><p>本周退单</p><h5>3</h5></div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <div><p>本周退单</p><h5 class="b_r">3</h5></div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light right">
                            <el-row>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <div><p>本周退单</p><h5>3</h5></div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple-light">
                                        <div><p>本周退单</p><h5>3</h5></div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <div><p>本周退单</p><h5 class="b_r">3</h5></div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="tab">
                <div class="sou">
                    <el-select v-model="value" placeholder="请选择区域">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-date-picker
                        v-model="time"
                        type="datetimerange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['12:00:00']">
                    </el-date-picker>
                    <el-button>查询</el-button>
                </div>
                <div class="table">
                    <el-table
                        :data="tableData"
                        border
                        style="width: 40%">
                        <el-table-column
                            prop="date"
                            label="TOP10菜单明细"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="销售额"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="订单额">
                        </el-table-column>
                    </el-table>
                    <el-table
                        :data="tableData1"
                        border
                        style="width: 40%">
                        <el-table-column
                            prop="date"
                            label="TOP10门户明细"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="销售额"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="订单额">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="cunhuo">
            <div class="lineheight"><span>存货预警</span></div>
            <hr>
            <div class="cunhuo_tab">
                <div class="shangxian">
                    <p><span>存货上限</span><span class="sp2">查看更多</span></p>
                    <el-table
                        :data="tableData2"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="date"
                            label="TOP10菜单明细"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="销售额"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="订单额">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="xiaxian">
                    <p><span>存货下限</span><span class="sp2">查看更多</span></p>
                </div>
                <div class="baozhiqi">
                    <p><span>保质期</span><span class="sp2">查看更多</span></p>
                    <el-table
                        :data="tableData2"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="date"
                            label="TOP10菜单明细"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="销售额"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="订单额">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="liuliang_week">
            <div class="nowweek">
                <p class="lineheight"><span>本周客流量</span><span class="sp2">详情<i class="el-icon-arrow-right"></i></span>
                </p>
                <hr>
                <div class="left"></div>
                <div class="right">
                    <div class="charts">
                        <div id="main" :style="{width:'300px',height:'300px'}"></div>
                    </div>
                </div>
            </div>
            <div class="lastweek">
                <p class="lineheight"><span>上周客流量</span><span class="sp2">详情<i class="el-icon-arrow-right"></i></span>
                </p>
                <hr>
                <div class="left">

                </div>
                <div class="right">

                </div>
            </div>

        </div>
        <div class="liuliang_month">

        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "index",

        data() {
            return {
                time: '',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀16 弄'
                }],
                tableData1: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金弄'
                }],
                tableData2: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区'
                }],
                canvasId: 'myCanvas',
                type: 'line',
                width: 500,
                height: 400,
                data: [
                    {name: '2014', value: 1342},
                    {name: '2015', value: 2123},
                    {name: '2016', value: 1654},
                    {name: '2017', value: 1795},
                ],
                ooptions : {
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    legend: {
                        data: ['销量']
                    },
                    xAxis: {
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'line',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                },
            }
        },
        mounted() {
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption(this.ooptions);
        }

    }
</script>

<style lang="less" scoped>
    .lineheight {
        line-height: 50px
    }

    .order {
        margin: 16px auto;
        .left {
            border-right: 1px solid #dedede;
            h5 {
                font-weight: 600;
                font-size: 20px;
                margin: 20px 0 10px 0;
                border-right: 1px solid #ddd;
            }
            .b_r {
                border: 0px
            }
        }
        .right {
            color: #A0A0A0;
            h5 {
                font-weight: 600;
                font-size: 20px;
                margin: 20px 0 10px 0;
                border-right: 1px solid #ddd;
            }
            .b_r {
                border: 0px
            }
        }
        p {
            text-align: center
        }
        h5 {
            text-align: center;
            margin: 10px auto
        }
    }

    .tab {
        .sou {
            margin-bottom: 10px
        }
        .table {
            display: flex;
        }
    }

    .cunhuo {
        margin: 20px auto;
        .cunhuo_tab {
            margin: 20px auto;
            display: flex;
            div {
                flex: 1;
            }
            .xiaxian {
                margin: 0 10px
            }
            justify-content: space-between;
            p {
                width: 100%;
                display: block;
                display: flex;
                justify-content: space-between;
                .sp2 {
                    color: orange
                }
            }

        }
    }

    .liuliang_week {
        display: flex;
        div {
            flex: 1
        }
        .nowweek {
            margin-right: 20px
        }
        p {
            width: 100%;
            display: block;
            display: flex;
            justify-content: space-between;
            .sp2 {
                color: #5bc0de
            }
        }
    }
</style>
